<template>
    <div class="my-select">
        <input-title :title="title"></input-title>
        <div class="ipt-select mouse-active" :data-disabled="disabled" :data-show="isShow" tabindex="-1" @blur="blur"
            @click.stop="add" :style="{ 'min-width': width }">
            <div class="hk-select" :data-value="selectValue">
                <span v-if="selectNames" class="name" :style="{ 'color': color }">{{
                    selectNames
                }}</span>
                <span v-else class="placeholder">{{ placeholder }}</span>
            </div>
            <div class="hk-options" ref="select" v-show="isShow" :style="{ 'min-width': width }">
                <template v-if="typeList.length > 0">
                    <div class="hk-option" v-for="item, index in typeList" :key="index" @click.stop="addSelect(item)">
                        {{ item.name }}</div>
                </template>

                <div v-else class="select-empty">No Data!</div>
            </div>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import inputTitle from '../../components/input-title';
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        typeList: {
            type: [Array, Object],
            default: []
        },
        placeholder: {
            type: [String, Number],
            default: '请选择'
        },
        width: {
            type: String,
            default: ""
        },
        history: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        color: {
            type: String,
            default: ""
        }
    },
    components: {
        inputTitle
    },
    setup(props) {
        let data = reactive({
            selectValue: '',
            isShow: false,
            selectList: []
        });
        return {
            ...toRefs(data)
        }
    },

    methods: {
        add() {
            this.isShow = !this.isShow
        },
        addSelect(value) {
            this.selectValue = value.value;
            this.isShow = false;
        },
        blur() {
            this.isShow = false
        }
    },
    watch: {
        history(newVal, oldVal) {
            this.selectValue = newVal
        },
        typeList(newVal, oldVal) {
            this.selectList = newVal
        },
        selectValue(newVal, oldVal) {
            this.$emit('message', newVal)
        }
    },
    computed: {
        selectNames() {
            let num = '';
            this.typeList.forEach(item => {
                if (this.selectValue === item.value) {
                    num = item.name
                }
            });
            return num;
        }
    }
}
</script>

<style lang="less" scoped>
.my-select {
    width: 100%;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}


.ipt-select {
    min-width: 1.6rem;
    width: max-content;
    height: 0.85rem;
    position: relative;
    padding-right: 0.28rem;
}

.ipt-select[data-disabled=true] {
    pointer-events: none;
}

.ipt-select::after {
    content: "";
    background: url("@/assets/img/application/icon-down.png") no-repeat;
    background-size: cover;
    width: 0.21rem;
    height: 0.19rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.8s;
}

.ipt-select[data-show=true]::after {
    transform: translateY(-50%) rotate(180deg);
}

.hk-select {
    z-index: -1;
    height: 0.85rem;
    font-size: 0.53rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.85rem;
}

.placeholder {
    display: inline-block;
    width: 100%;
    font-size: 0.53rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #C5C5CA;
    line-height: 0.85rem;
    text-align: center;
}

.name {
    display: inline-block;
    width: 100%;
    font-size: 0.53rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.85rem;
    text-align: left;
}

.hk-options {
    z-index: 999;
    position: absolute;
    width: 100%;
    top: 101%;
    left: 0;
    background: rgba(255, 255, 255, 0.25);
    border: 0.05rem solid #FFFFFF;
    backdrop-filter: blur(0.266rem);

    .hk-option {
        padding: 0 0.45rem;
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #68656C;
        line-height: 0.8rem;
        text-align: center;
        width: 100%;
    }

    .hk-option:hover {
        background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
        color: #FFFFFF;
    }
}

.select-empty {
    font-size: 0.53rem;
    color: #999;
    text-align: center;
}
</style>